<script setup>
import uvTabs from "../../uni_modules/uv-tabs/components/uv-tabs/uv-tabs.vue";
import LiuyunoTabs from "../../components/liuyuno-tabs/liuyuno-tabs.vue";
import {ref} from 'vue'

const list = ['全部', '审批中', '审批成功', '审批拒绝', '待销假']
const index = ref(0)
const tabchange = (value) => {
  index.value = value
}

</script>

<template>
  <view class="background">
    <view class="font">
      <liuyuno-tabs @tabClick="tabchange" class="h1" :tabindex="index" :tab-data="list"></liuyuno-tabs>
    </view>
    <view v-if="index==0">
      <view class="dp">
        <view class="h3">
          <text class="h2">2025-9-08 09:30:34</text>
          <br>
          <text class="title">申请时间:</text>
          <text class="zhengwen">2025-9-08 09:40:00</text>
          <br>
          <text class="title">请假类型：</text>
          <text class="zhengwen">事假</text>
          <br>
          <text class="title">开始时间：</text>
          <text class="zhengwen">2025-9-08 09:40:00</text>
          <br>
          <text class="title">结束时间：</text>
          <text class="zhengwen">2025-9-09 09:40:00</text>
          <br><br>
          <hr>
          <view class="shenpi">
            <view class="sp1">
              <view>
                <image class="img" src="/static/shenpi@2x.png"></image>
              </view>
              <view class="sp">
                审批中
              </view>
            </view>
            <view class="btn">
              <button class="mini-btn" type="warn" size="mini">撤销</button>
            </view>
          </view>
        </view>
      </view>
      <view class="dp">
        <view class="h3">
          <text class="h2">2025-9-08 09:30:34</text>
          <br>
          <text class="title">申请时间:</text>
          <text class="zhengwen">2025-9-08 09:40:00</text>
          <br>
          <text class="title">请假类型：</text>
          <text class="zhengwen">事假</text>
          <br>
          <text class="title">开始时间：</text>
          <text class="zhengwen">2025-9-08 09:40:00</text>
          <br>
          <text class="title">结束时间：</text>
          <text class="zhengwen">2025-9-09 09:40:00</text>
          <br><br>
          <hr>
          <view class="shenpi">
            <view class="sp2">
              <view>
                <image class="img" src="/static/形状@2x.png"></image>
              </view>
              <view class="sp3">
                审批通过
                <text class="已销假">已销假</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view v-else-if="index==1">
      <view class="dp">
        <view class="h3">
          <text class="h2">2025-9-08 09:30:34</text>
          <br>
          <text class="title">申请时间:</text>
          <text class="zhengwen">2025-9-08 09:40:00</text>
          <br>
          <text class="title">请假类型：</text>
          <text class="zhengwen">事假</text>
          <br>
          <text class="title">开始时间：</text>
          <text class="zhengwen">2025-9-08 09:40:00</text>
          <br>
          <text class="title">结束时间：</text>
          <text class="zhengwen">2025-9-09 09:40:00</text>
          <br><br>
          <hr>
          <view class="shenpi">
            <view class="sp1">
              <view>
                <image class="img" src="/static/shenpi@2x.png"></image>
              </view>
              <view class="sp">
                审批中
              </view>
            </view>
            <view class="btn">
              <button class="mini-btn" type="warn" size="mini">撤销</button>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view v-else-if="index==2">
      <view class="dp">
        <view class="h3">
          <text class="h2">2025-9-08 09:30:34</text>
          <br>
          <text class="title">申请时间:</text>
          <text class="zhengwen">2025-9-08 09:40:00</text>
          <br>
          <text class="title">请假类型：</text>
          <text class="zhengwen">事假</text>
          <br>
          <text class="title">开始时间：</text>
          <text class="zhengwen">2025-9-08 09:40:00</text>
          <br>
          <text class="title">结束时间：</text>
          <text class="zhengwen">2025-9-09 09:40:00</text>
          <br><br>
          <hr>
          <view class="shenpi">
            <view class="sp2">
              <view>
                <image class="img" src="/static/形状@2x.png"></image>
              </view>
              <view class="sp3">
                审批通过
                <text class="已销假">已销假</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view v-else-if="index==3">
      <view class="dp">
        <view class="h3">
          <text class="h2">2025-9-08 09:30:34</text>
          <br>
          <text class="title">申请时间:</text>
          <text class="zhengwen">2025-9-08 09:40:00</text>
          <br>
          <text class="title">请假类型：</text>
          <text class="zhengwen">事假</text>
          <br>
          <text class="title">开始时间：</text>
          <text class="zhengwen">2025-9-08 09:40:00</text>
          <br>
          <text class="title">结束时间：</text>
          <text class="zhengwen">2025-9-09 09:40:00</text>
          <br><br>
          <hr>
          <view class="shenpi">
            <view class="sp2">
              <view>
                <image class="img" src="/static/refuse.png"></image>
              </view>
              <view class="sp4">
                审批拒绝
                <text class="请假理由不充分">请假理由不充分</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<style>
.h1 {
  font-family: 黑体;
  color: #777777;
  margin-top: 10px;
  font-size: 5px;
}

.title {
  font-size: 14px;
  color: #777777;
  font-family: 黑体;
  margin-left: 10px;
}

.h2 {
  font-family: 黑体;
  font-weight: 500;
  font-size: 14px;
  color: #000000;
  text-align: left;
  margin-left: 10px;
  margin-top: 10px;
}

.zhengwen {
  font-size: 14px;
  color: black;
  opacity: 90%;
}

.h3 {
  width: 351px;
  height: 170px;
  background: #FFFFFF;
  border-radius: 12px;
}

.background {
  position: fixed;
  width: 100%;
  height: 100%;
  background: #F3F5F9;
}

.dp {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

.img {
  width: 14px;
  height: 14px;
  margin-left: 10px;
}

.sp {
  font-family: 黑体;
  font-weight: 400;
  font-size: 14px;
  color: #006DFF;
  width: 42px;
  height: 20px;
  margin-top: 3px;
}

.shenpi {
  margin-left: 10px;
  display: flex;
}

.mini-btn {
  margin-left: 250px;
  margin-bottom: 30px;
  width: 70px;
  height: 26px;
}

.sp1 {
  display: flex;
  justify-content: start;
  align-items: center;
  margin-bottom: 18px;
}

.btn {
  margin-top: 10px;
  margin-left: -55px;
}

.sp2 {
  display: flex;
  justify-content: start;
  align-items: center;
  height: 20px;
  margin-top: 15px;
}

.sp3 {
  color: #00b271;
  font-size: 14px;
  font-family: 黑体;
  font-weight: 400;
  line-height: 0;
  letter-spacing: 0;
  paragraph-spacing: 0;
  text-align: left;
}

.已销假 {
  color: #777777;
  font-size: 14px;
  font-family: 黑体;
  font-weight: 400;
  line-height: 0;
  letter-spacing: 0;
  paragraph-spacing: 0;
  text-align: left;
}
.sp4{
  color: #9c131e;
  font-size: 14px;
  font-family: 黑体;
  font-weight: 400;
  line-height: 0;
  letter-spacing: 0;
  paragraph-spacing: 0;
  text-align: left;
}
.请假理由不充分{
  color: #777777;
  font-size: 14px;
  font-family: 黑体;
  font-weight: 400;
  line-height: 0;
  letter-spacing: 0;
  paragraph-spacing: 0;
  text-align: left;
}
</style>
